<template>
    <div class="discount_body">
        <div class="title">低价优选</div>
        <div class="nav">
            <Screen style="margin-right: 12px" :text="item.title" :action="classTxt == item.title"
                :cardShow="item.data.length" @click="handleAction(item.title)" v-for="item in navInfo" :key="item.id"
                :data="item.data" :classTxt="classTxt" />
        </div>
        <div class="main">
            <div>
                <Card3
                    url="https://www.showjane.com/public/upload/goods/2023/02-27/69e5942086ad2de6b7cc90b193bc40dc.jpg"
                    title="秀匠货架" :price="2680" :discount="9" num="6104T"  width="393px"/>
            </div>
            <div class="footer">
                <el-button color="#000" round dark>加载更多</el-button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getDiscount } from '@/apis/apis.ts'

const handleAction = (txt) => {
    classTxt.value = txt;

}
const navInfo = ref([])
const DiscountInfo = ref([])
const classTxt = ref('全部')
onMounted(async () => {
    let res = await getDiscount()
    navInfo.value = res.nav
    DiscountInfo.value = res.all
    console.log(res);
})

</script>

<style scoped lang="scss">
.discount_body {
    width: 1300px;
    margin: 0 auto;

    & .title {
        font-weight: bold;
        font-size: 22px;
        margin-bottom: 28px;
    }

    & .nav {
        display: flex;

    }

    & .main {
        width: 100%;
        margin-top: 20px;
        margin-bottom: 60px;
        background-color: #F5F5F5;
        overflow: hidden;
        padding: 15px 40px 90px;

        &>div {
            display: flex;
            justify-content: space-between;
        }

        & .footer {
            width: 100%;
            margin-top: 20px;
            display: flex;
            justify-content: center;
            & .el-button {
                width: 120px;
                height: 40px;
                font-size: 14px;
            }
        }
    }
}
</style>